在結束CSS之前，想針對CSS的學習心得做點分享，CSS學習的難點，我覺得不在於屬性參數的語法，因為以目前的學習資源(ChatGPT、W3schools)，要快速查詢想要功能的語法，並不會花太多時間。

反而是在程式除錯方面，CSS就顯得特別劣勢，主要原因在於CSS對於錯誤的容忍度相當得高！有時候明明語法寫錯了，但網頁還是能正常顯示預期的效果，即便不能顯示預期的效果，但也通常不會使得網頁崩潰，錯誤的語法在CSS面前，很可能就是不理會，直接跳過，但也不留下任何錯誤訊息，好供你查找除錯。

這種錯誤語法，初學可能還影響不大，但是程式撰寫通常是在試誤之間嘗試，不斷就想像的語法寫法，與程式結果交互印證之下，而慢慢累積對該語言的熟悉度。而一旦錯誤語法的寫法，沒有被發掘出來，很就會慢慢根深蒂固，變成自以為的正確語法。那一旦程式專案一擴大，涉及到的都是上千、上萬行的CSS程式碼，屆時想要除錯，就變得天方夜譚，直接讓人想放棄。

因此，在這邊提供一個自己經過多次查找CSS錯誤之中，發現到幾個方式，可以在早期先確定CSS語法是否正確。

選擇器搭配邊框或底色屬性，可用來確認自己有選擇到預期中的元件

首先，在前面有提到CSS選擇器，熟悉選擇器的語法，諸如類別選擇器(class)、ID選擇器(id)，及組合選擇器(combinator)，盡量進行限縮式的選取，至少可以排除不可能被選到的元件，減少CSS控制到預期之外的元件。

在運用選擇器限縮控制元件範圍後，可以對預期想要控制的元件，都先加上邊框或底色，如border: 2px solid red;，或background-color: #ffe5e5;，這樣的好處是在自己檢視網頁時，可以確認自己使用的經限縮後的選擇器，有正確選擇到預期的元件。另外，在多重、複雜父子層次的結構中，也可以確認自己所選擇的元件位在哪一個子層。確定自己選擇到正確的元件後，就可以針對原本想要添加的CSS屬性進行撰寫，並可同步確認是否如期呈現於網頁畫面之中。不僅可以快速掌握選擇器語法，也可以加深自己對所撰寫多層父子結構的認識，更可以確認CSS屬性是否正確渲染，避免錯誤的CSS語法的經驗累積。

在瀏覽器中按F12，可快速找尋網頁中特定的元件，並了解網頁整體的元件架構

再者，前面所述的方法，在自己撰寫網頁的同時，可以大量運用，但當未來使用到網頁套件(如Vue)進行網頁撰寫時，就會顯得不切實際。此時，可以運用網頁瀏覽器所提供的開發者工具。開啟的方式，就是打開自己所撰寫的網頁，然後按F12，右邊畫面就會出現開發者工具頁面。在其中可以找到元件檢查器(Select an element in the page to inspect it)，如下圖中的黃色方框，然後在網頁中任何有興趣的地方點擊，在開發者工具頁面中的「Elements」分頁，就會出現點擊元件所對應的HTML程式碼所在位置。

在找到元件程式碼所在位置後，第一件事，建議是先往上一層一層查看父層元件，快速了解該網頁結構。如下圖中的黃色方框，原本程式碼中class的空白間隔改成以.間隔，圖中例子所選到的元件為div，class="qa-list profile-list"，此元件的父層元件同樣為div，class="board leftside profile-main"。

再來是針對自己想要控制的元件，找出他的類別選擇器 (class selector)，然後同樣嘗試加上邊框，如border: 2px solid red;，若能成功加上邊框，代表你成功找到對應的元件，接下來才去進行原先預期想要添加的CSS控制屬性。

格式化CSS的類別命名風格，以能直觀地從類別名稱即了解該元件功能

最後，當網頁程式碼稍微擴大，往往CSS的類別名稱會變得相當複雜，此時如果你又對網頁結構不熟悉的話，要針對特定元件去做調整，即便真的調整成功，但往往會在不適當的位置加上CSS程式碼，反正造成未來要再管理程式碼的隱患。

因此，最好在一開始，先針對網頁結構，進行CSS類別名稱的管理與命名，如果是常用、屬於廣域的類別，直接先列在最開頭，這些類別就等於是所撰寫網頁的風格。

接下來再針對各自網頁的功能做區分，在特定的功能組區塊，若可沿用廣域的類別，就不用再另外命名類別，僅針對該功能組區塊需要的特定類別名稱，才去進行新增、撰寫，也方便查找。這樣可以避免未來同樣類別衝突，改了其中一個類別程式碼，卻發現沒效果，但又不知道另外一個類別程式碼在哪，造成無法解決的窘境。

CSS類別名稱的命名方式，可以即早決定就Camel, Snake, Kebab中選擇一種自己習慣的方式命名。並且可採用命名空間法(Namespace Naming)，以功能或區域加上縮寫前綴，提升辨識度與可解讀性。針對更大型的專案，更可以考慮BEM 命名法(Block Element Modifier)，命名格式如block__element--modifier，可解讀性大幅提高

• block，代表元件，如 card
• element，代表元件中的子區塊，如 card__title
• modifier，代表變形樣式，如 card--highlight
• 但類別名稱長度也隨之增加，因此較適合於本身就有一定複雜度的大型專案，就小型專案若每個類別名稱都那麼長，多餘的命名文字反而成為冗詞，不一定對於程式撰寫者在解讀上增加助益。